﻿@model Aidbrella.Web.ViewModels.ProjectViewModel
@using Aidbrella.Web
@{
	ViewBag.Title = string.Format("{0} - {1} - AidBrella", Model.Title, Model.Organization.Name);
}
<h2>@Model.Title</h2>

<div id="project-feed">
	<div class="feed-input" type="project" interval="1000" userId="@Model.UserId" targetId="@Model.ProjectId">
        @foreach (var u in Model.Updates) {
            <!-- TODO: create initial updates -->
            <div></div>
        }        
	</div>
</div>

<div id="project-information">
	<div id="project-sites-map">
	</div>

	<script id="location-infobox-template" type="text/x-jquery-tmpl">        
	</script>

	<script type="text/javascript">
		$(window).load(function () {
			var map = GetMap(document.getElementById("project-sites-map"));

			var infoBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {visible: false});
			map.entities.push(infoBox);

			var points = @Model.ProjectLocations.ToJson();
			var locations = $.map(points, function (item) { return new Microsoft.Maps.Location(item.Location.Latitude, item.Location.Longitude); });

			$.each(points, function (idx, item) {
				var loc = new Microsoft.Maps.Location(item.Location.Latitude, item.Location.Longitude);
				var pin = new Microsoft.Maps.Pushpin(loc);

				Microsoft.Maps.Events.addHandler(pin, 'click', function () {
					infoBox.setOptions({visible: false});
					infoBox.setLocation(loc);
					infoBox.setOptions({title: item.Name, visible: true});
				});

				map.entities.push(pin);
			});

			var boundingRectangle = Microsoft.Maps.LocationRect.fromLocations(locations);
			map.setView({bounds: boundingRectangle});
		});
	</script>

	<div id="project-details">
		<h4> Organization: <a href='@Url.Action(MVC.Project.Actions.Show(@Model.Organization.OrganizationId))'>@Model.Organization.Name</a></h4>
		<span class="project-description">Description: @Model.Description</span>
	</div>

	@Html.Action(MVC.Project.Actions.ProjectMemberList(@Model.ProjectId))
</div>